<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8" /> 
	<title>jQuery UI swapable</title> 
	
	<link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" /> 
	<link type="text/css" href="http://jqueryui.com/demos/demos.css" rel="stylesheet" /> 
	
	<script type="text/javascript" src="http://jqueryui.com/jquery-1.4.2.js"></script> 
	<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script> 
	<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 
	<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script> 
	<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.sortable.js"></script> 
	
	<script type="text/javascript" src="jquery.ui.swapable.js"></script> 

	<style type="text/css"> 
		#swapable { list-style-type: none; margin: 0; padding: 0; }
		#swapable li { margin: 3px 3px 3px 0; padding: 2px; float: left; width: 50px; height: 50px; font-size: 2em; text-align: center; }
		.ui-state-highlight { height: 50px; width:50px; }
		.demo {width:180px; height:180px; }
	</style> 
	
	
	
	<script type="text/javascript"> 
	$(function() {
		$("#swapable").swapable({
			cursor:'move',
			placeholder: 'ui-state-highlight'

		});
		$("#swapable").disableSelection();
	});
	</script> 
</head> 
<body> 
<h1 style="text-align:center;">jQuery UI Swapable</h1>

<h2 style="text-align:center;"><a href="swapable_list.html">List</a> Grid <a href="swapable_row.html">Row</a></h2>
<div class="demo"> 

<ul id="swapable"> 
	<li id="item1" class="ui-state-default">1</li> 
	<li id="item2" class="ui-state-default">2</li> 
	<li id="item3" class="ui-state-default">3</li> 
	<li id="item4" class="ui-state-default">4</li> 
	<li id="item5" class="ui-state-default">5</li> 
	<li id="item6" class="ui-state-default">6</li> 
	<li id="item7" class="ui-state-default">7</li>
	<li id="item8" class="ui-state-default">8</li>	
	<li id="item9" class="ui-state-default">9</li>	
</ul> 
 
</div><!-- End demo --> 
 
</body> 
</html> 